<template>
    <el-table :data="imgList" @cell-click="onCellClick">
        <el-table-column label="ID" prop="id" width="50"></el-table-column>
        <el-table-column label="图片">
            <template #default="scope">
                <el-image class="img" :src="baseUrl+scope.row.path" fit="contain"></el-image>
            </template>
        </el-table-column>
        <!-- <el-table-column label="操作"></el-table-column> -->
        <el-table-column label="时间" prop="created"></el-table-column>
    </el-table>
    <el-pagination
    small
    background
    layout="prev, pager, next"
    :total="1"
    class="mt-4"
  />
</template>
<script lang="ts">
import ApiHelper from '@/api/ApiHelper';
import { ImageMapper } from '@/const';
import { onMounted } from 'vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name:'ImageTable',
    emits:['selectImage'],
    setup(props, ctx){
        const baseUrl=process.env.VUE_APP_BASE_API
        const imgList=ref<ImageMapper[]>([])
        const getData=()=>{
        ApiHelper.getInstance().getImages().then(res=>{
          //console.log(res)
          /*imgList.value.length=0
          res.forEach((item:any)=>{
            imgList.value.push(item)
          })*/
          imgList.value=res
        }).catch(err=>{
          console.log(err)
        })
      }
      const onCellClick=(row:ImageMapper)=>{
        //
        //console.log(row)
        ctx.emit('selectImage',row)
      }
      onMounted(()=>{
          getData()
      })
      return {
          imgList,
          baseUrl,
          onCellClick
      }
    }
})
</script>
<style lang="scss" scoped>
.img{
    width: 100px;
    height: 100px;
}
</style>